// tabbar
<template>
  <div class="article-overview">
    <div class="left">
      <el-image
        class="left-image"
        :src="articleInfo.articleImgUrl"
        fit="fill"
      >
      </el-image>
    </div> 
    <div class="right">
      <div class="title" @click="handleClick">{{ articleInfo.title }}</div>
      <div class="content" @click="handleClick">{{ articleInfo.contentDesc }}</div>
      <div class="annotation">
        <div>{{ articleInfo?.tagName }}</div>
        <div  v-if="articleInfo?.tagName" :style="{color:'red', fontSize:'2rem'}">·</div>
        <div>{{ articleInfo.created_at }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    articleInfo:{
      type:Object,
      default:() => ({})
    }
  }, 
  data(){
    return {}
  },
  mounted(){
    // this.userImageUrl = localStorage.getItem('userImageUrl')
  },
  methods:{
    handleClick(){
      this.$router.push({ path: `/articleDetail/${this.articleInfo.id}` })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url("./index.scss");

</style>